<template>
    <div class="scientific">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470" v-if="menudatalist">
                <div class="second_show_text scientific">
                    <div class="second-title">
                        <p class="en" v-html="menudata.alias"></p>
                        <p class="cn">{{menudata.name}}</p>
                    </div>
                    <div class="text" v-html="menudata.content">

                    </div>
                </div>
            </div>
            <i class="tips"></i>
        </div>
        <div class="pages_w1470" v-if="menudatalist">
            <ul class="ul scientific-img-list fl-clr opacityli"
                data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                <li v-for="(item,index) in menudatalist[0].data" :key="index" v-show="index<4">
                    <div class="box scale">
                        <div class="img">
                            <img :src="$store.state.domain+item.pic">
                            <div class="txt">
                                <div class="pa" v-html="item.info">
                                </div>
                            </div>
                        </div>
                        <div class="title">{{item.name}}</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="second_box" v-if="menudatalist">
            <img :src="this.$store.state.domain+menudatalist[1].data[0].pic" class="experts-rx-r">
            <div class="pages_w1470">
                <div class="second-title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].alias}}</p>
                    <p class="cn">{{menudatalist[1].name}}</p>
                </div>
                <div class="experts-box e1 opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <div class="experts-name">
                        <p class="en">{{menudatalist[1].data[0].alias}}</p>
                        <p class="cn">{{menudatalist[1].data[0].name}}</p>
                    </div>
                    <div class="experts-position">{{menudatalist[1].data[0].source}}</div>
                    <div class="txt" v-html="menudatalist[1].data[0].info">

                    </div>
                    <div class="experts-h2">主要研究方向</div>
                    <div class="txt" v-html="menudatalist[1].data[0].content"></div>
                </div>
                <div class="experts-box-pa fl-clr">
                    <img :src="this.$store.state.domain+menudatalist[1].data[1].pic" class="experts-rx-l">
                    <img src="../assets/images/s2.png" class="experts-l">
                    <div class="experts-box e2 opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                        <div class="experts-name">
                            <p class="en">{{menudatalist[1].data[1].alias}}</p>
                            <p class="cn">{{menudatalist[1].data[1].name}}</p>
                        </div>
                        <div class="experts-position">{{menudatalist[1].data[1].source}}</div>
                        <div class="txt" v-html="menudatalist[1].data[1].info">

                        </div>
                        <div class="experts-h2">主要研究方向</div>
                        <div class="txt" v-html="menudatalist[1].data[1].content"></div>
                    </div>
                </div>
            </div>
            <img src="../assets/images/experts-jt.png" class="experts-jt">
        </div>


        <div class="second_box scientific-bj" v-if="menudatalist">
            <div class="pages_w1470">
                <div class="second-title align-r opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en" v-html="menudatalist[2].alias"></p>
                    <p class="cn">{{menudatalist[2].name}}</p>
                </div>
            </div>
            <section v-for="(item,index) in menudatalist" :key="index" v-show="index>2&&index<7">
                <div :class="classname(index)" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <img v-if="!isMobile" :src="$store.state.domain+item.pic">
                    <img v-else :src="$store.state.domain+'/upload/image/img/'+item.id+'.svg'">
                    <!--<p>{{item.name}}</p>-->
                </div>
                <div :class="classnameson(index,item.data)">
                    <swiper :options="swiperScientificShow(index,item.data)" :auto-destroy="false">
                        <swiper-slide v-for="(items,indexs) in item.data" :key="indexs">
                            <router-link :to="{name: 'scientific_details', query :{id :items.id}}" class="box scale">
                                <img :src="$store.state.domain+items.pic"></router-link>
                        </swiper-slide>

                    </swiper>

                    <div class="bottom" v-if="item.data&&Object.keys(item.data).length>4">
                        <div class="a swiper-next"></div>
                        <div class="a swiper-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>
            </section>


        </div>
        <div class="pages_w1470" v-if="menudatalist">
            <div class="second-title opacity zljs" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                <p class="en">{{menudatalist[7].alias}}</p>
                <p class="cn">{{menudatalist[7].name}}</p>
            </div>
            <div class="swiper-patents-show scientific_bottom">
                <swiper :options="swiperPatentsShow" :auto-destroy="false">
                    <swiper-slide v-for="(item,index) in newslist" :key="index">
                        <div class="webbox">
                            <span class="box scale"><img :src="$store.state.domain+item.pic"></span>
                            <div class="txt">{{item.name}}</div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div class="bottom">
                    <div class="swiper-pagination"></div>
                </div>
                <div class="swiper_more"><img src="../assets/images/more.svg"></div>
            </div>
        </div>


        <Footer/>

    </div>
</template>





<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

export default {
    components: {
        Footer, Header
    },
    data () {
        return {
            isMobile: 0,
            newslist: {},
            swiperPatentsShow:{
                  slidesPerView:5,
                  spaceBetween:20,
                  slidesPerGroup:5,
                  loop: true,
                  pagination: {
                      el: '.scientific_bottom .swiper-pagination',
                      clickable :true
                  },
                  autoplay: {
                    delay: 2500
                  },
                  breakpoints:{
                      750:{
                          slidesPerView:5
                      },
                      320:{
                           slidesPerView:2,
                           slidesPerGroup:1,
                           spaceBetween:0,
                           centeredSlides: true
                      }
                  }
            }
        }
    },
    computed: {

        menudata () {
            if (JSON.stringify(this.$store.getters.getmenudata(2)).length > 100) {
                return this.$store.getters.getmenudata(2)
            } else {
                return false
            }
        },
        menudatalist () {
            if (JSON.stringify(this.$store.getters.getmenudatalist(2)).length > 100) {
                return this.$store.getters.getmenudatalist(2)
            } else {
                return false
            }
        },
        menulistconfig () {
            return this.$store.getters.getmenuconfig
        },
    },
    mounted () {
        function isMobile() {
              let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
              return flag;
        }
        if (isMobile()) {
            this.isMobile=1
        } else {
            this.isMobile=0
        }

        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
        this.$axios
        .get(this.$store.state.domain+'/Multi/lists.json', {
            params: {
                id:35
            }
        })
        .then(response => {
            this.newslist = response.data.newslist;
        })
        .catch(error => {
            console.log(error);

        });

    },
    methods: {
        classname (index) {
            return "scientific-title  opacity t" + (index - 2);
        },
        classnameson (index, datas) {
            let gvar = datas&&Object.keys(datas).length>4?'':'on ';
            return gvar+"swiper-scientific-show scientific" + (index - 3);
        },
        classnamechild (index) {
            return "swiperScientificShow" + (index - 4);

        },
        swiperScientificShow (index,datas) {
            datas=datas??{};
            var gloops;
            if(Object.keys(datas).length>4){
                gloops = true;
            }else{
                gloops = false;
            }
            return {
                spaceBetween: 0,
                loop: gloops,
                slidesPerView: 5,
                loopAdditionalSlides: 0,
                pagination: {
                    el: '.scientific' + (index - 3) + ' .swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.scientific' + (index - 3) + ' .swiper-prev',
                    prevEl: '.scientific' + (index - 3) + ' .swiper-next',
                },
                breakpoints:{
                    750:{
                        slidesPerView:5
                    },
                    320:{
                         slidesPerView:2.5
                    }
                }
            }
        }
    }
}
</script>
